<template>
  <el-calendar class="h-full" ref="calendar">
    <template #header="{ date }">
      <span>{{ date }}</span>
      <span class="font-bold">新进班组管控</span>
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-month')"> 上月 </el-button>
        <el-button size="small" @click="selectDate('today')">今天</el-button>
        <el-button size="small" @click="selectDate('next-month')"> 下个月 </el-button>
      </el-button-group>
    </template>

    <template #date-cell="{ data }">
      <div class="date-div" @click="clickDate(data.day)">
        <div
          :class="
            dates.some((d) => d.setHours(8) === new Date(data.day).getTime()) ? 'is-loged' : ''
          "
        >
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split('-').slice(2).join('') }}
            <!-- {{ dates.some((d) => d.setHours(8) === new Date(data.day).getTime()) ? '✔️' : '' }} -->
          </p>
        </div>
        <div
          class="text-xs flex gap-1"
          v-if="
            recordDbs.some((d) => new Date(d.date).setHours(8) === new Date(data.day).getTime())
          "
        >
          <span>提级班组</span>
          <span class="font-bold text-[#5C8C46]">{{
            recordDbs.filter((d) => new Date(d.date).setHours(8) === new Date(data.day).getTime())
              .length
          }}</span>
        </div>
      </div>
    </template>
  </el-calendar>

  <addLogDialog :visiable="visiable" :data="selectData" @close="close" />
</template>
pnp
<script lang="ts" setup>
import { ref } from 'vue'
import type { CalendarDateType, CalendarInstance } from 'element-plus'
import useRecord from '@renderer/composables/useRecord'
import useLog from '@renderer/composables/useLog'
import { useRouter } from 'vue-router'
import addLogDialog from '@renderer/components/addLogDialog.vue'

const dates = ref<Date[]>([])
const visiable = ref(false)
const selectData = ref('')

const { all: allRecord, recordDbs } = useRecord()
const { all: allLog, logs } = useLog()
const router = useRouter()

const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

const clickDate = (data: string) => {
  const isCunZai = dates.value.some((d) => d.setHours(8) === new Date(data).getTime())

  if (isCunZai) {
    // 如果存在，跳转至
    const log = logs.value.find((l) => new Date(l.date).setHours(8) === new Date(data).getTime())
    router.push({ name: 'log', params: { id: log?.id } })
  } else {
    // 如果不存在，那么新增页面
    visiable.value = true
    selectData.value = data
  }
}
const close = async () => {
  visiable.value = false
  await init()
}
// 初始化
const init = async () => {
  await allLog()
  await allRecord()
  const set = new Set<Date>()
  for (const re of logs.value) {
    set.add(new Date(re.date))
  }
  dates.value = [...set]
}
init()
</script>

<style>
.is-selected {
  color: #1989fa;
}
.is-loged {
  @apply border-blue-500 border-b-4 mb-1;
}
.date-div {
  @apply h-full text-sm flex flex-col justify-center items-center;
}
</style>
